<route>
    {
        meta: {
            layout: 'index',
            title:'穿心解卡风险点'
        }
    }  
</route>
<template>
    <div>
        <a-row>
            <a-input-search v-model:value="searchKey" placeholder="请输入风险点相关信息" enter-button="搜索"
                style="width: 250px; margin-bottom: 20px;" @search="handleQuery()" />
            <a-button style="margin-left: 10px;" type="dashed" @click="reset">重置</a-button>
            <a-button type="primary" style="margin-left: auto; margin-bottom: 20px; width: 100px;" @click="addItem">
                <template #icon><plus-outlined /></template>新增
            </a-button>
        </a-row>
        <a-row>
            <a-col :span="6" v-for="(risk, index) in riskData" :key="risk.id" style="margin-bottom: 15px;">
                <a-card hoverable style="width: 93%;">
                    <template #cover>
                        <template v-if="risk.fileType == 'png' || risk.fileType == 'jpg'">
                            <div style="display: flex; justify-content: center; align-items: center; margin-top: 10px;">
                                <a-image :width="200" :height="150" :src="`/dev-api/ufs/preview/${risk.riskFileId}`" />
                            </div>
                        </template>
                        <template v-if="risk.fileType == 'mp4'">
                            <div class="video-player">
                                <video style="width: 100%;height: 150px;" ref="videoPlayer"
                                    :src="`/dev-api/ufs/preview/${risk.riskFileId}`" controls></video>
                            </div>
                        </template>
                        <template v-if="!risk.riskFileId">
                            <div style="margin-top: 10px;">
                                <a-empty description="暂无图片/视频" />
                            </div>
                        </template>
                    </template>
                    <template #actions>
                        <edit-outlined key="edit" @click="editItem(risk)" />
                        <delete-outlined key="delete" @click="deleteItem(risk)" />
                    </template>
                    <a-card-meta :title="risk.riskType" :description="risk.risks" />
                </a-card>
            </a-col>
        </a-row>
        <AntdZh>
            <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                @change="getList" />
        </AntdZh>

        <!-- 新增/编辑弹窗 -->
        <AntdConfirmModal :title="title ? '新增风险点' : '编辑风险点'" ref="modalRef" width="700px" :keepSlot="false"
            @confirm="submitForm">
            <a-form :model="form" name="basic" :label-col="{ span: 10 }">
                <a-row>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="风险类别" name="riskType" :rules="[{ required: true, message: '请输入风险类别' }]">
                            <a-input v-model:value="form.riskType" style="width: 400px;" placeholder="请输入风险类别" />
                        </a-form-item>
                    </a-col>
                    <a-col :pull="4" :span="20">
                        <a-form-item label="风险" name="risks" :rules="[{ required: true, message: '请描述一下该风险' }]">
                            <a-input v-model:value="form.risks" style="width: 400px;" placeholder="请描述该风险" />
                        </a-form-item>
                    </a-col>
                </a-row>
                <a-row v-if="title == true">
                    <a-col :pull="4" :span="20">
                        <a-form-item label="上传附件">
                            <a-upload-dragger withCredentials v-model:fileList="fileList" style="width: 400px" name="file"
                                :before-upload="beforeUpload" @remove="handleRemove" :maxCount="1">
                                <p class="ant-upload-drag-icon">
                                    <inbox-outlined></inbox-outlined>
                                </p>
                                <p class="ant-upload-text">点击或者拖拽文件到此处上传</p>
                            </a-upload-dragger>
                        </a-form-item>
                    </a-col>
                </a-row>
            </a-form>
        </AntdConfirmModal>
    </div>
</template>
<script setup>
import { EditOutlined, DeleteOutlined, PlusOutlined, InboxOutlined } from '@ant-design/icons-vue';
import { queryList, deleteOne, updateOne, createOne } from "@/api/salvage/salvageRisk";
import request from '@/utils/request'
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const query = ref({ pageNum: 1, pageSize: 8, sortBy: 'id', order: 'DESC', searchKey: '', riskType: '' });
const riskData = ref()
const total = ref(1)
const searchKey = ref();
const form = ref({});
const title = ref(null);
const fileList = ref([]);
const fileForm = ref({
    file: null,
});
const videoPlayer = ref(null);

// 新增
function addItem() {
    title.value = true;
    form.value = {};
    modalRef.value.openModal();
}

// 文件上传
const beforeUpload = (file) => {
    console.log('beforeUpload', file);
    if (file.type !== "image/png" && file.type !== "video/mp4" && file.type !== "image/jpeg") {
        $.showToast({
            title: "只支持上传图片或是mp4视频",
            icon: "error",
        });
        return false;
    }
    // 记录文件
    fileForm.value.file = file;
};

// 移除文件
const handleRemove = (file) => {
    fileForm.value.file = null;
};

// 删除
function deleteItem(e) {
    console.log('删除', e);
    // if (e.riskFileId != null) {
    //     request.delete("/ufs/file/" + e.riskFileId, {
    //         headers: {
    //             "Content-Type": "application/json",
    //         },
    //     }).then((res) => {
    //         console.log(res);
    //         form.value.riskFileId = res.id;
    //     });
    // }
    deleteOne(e.id).then((res) => {
        $.showToast({
            title: "删除成功",
            icon: "success",
        });
        getList();
    });
};

//编辑
function editItem(e) {
    form.value = e;
    title.value = false;
    modalRef.value.openModal();
}

// 提交
function submitForm() {
    if (form.value.riskType == null || form.value.risks == null) {
        $.showToast({
            title: "不允许为空",
            icon: "warn",
        });
    } else {
        // 新建
        if (title.value == true) {
            form.value.riskFile = fileForm.value.file
            request.post("/salvage/risk", form.value, {
                headers: {
                    "Content-Type": "multipart/form-data",
                },
            }).then((res) => {
                // console.log('createOne', res);
                $.showToast({
                    title: "风险点新建成功",
                    icon: "success",
                });
                getList()
            });
        } else if (title.value == false) { //编辑
            updateOne(form.value).then((res) => {
                $.showToast({
                    title: "修改成功",
                    icon: "success",
                });
                getList()
            });
        }
        modalRef.value.closeModal()
    }
}

// 获取列表
function getList() {
    queryList(query.value).then((res) => {
        console.log('风险', res.content);
        // 提取文件的扩展名
        res.content.forEach((item) => {
            if (item.riskFileName != null) {
                let index = item.riskFileName.lastIndexOf(".");
                item.fileType = item.riskFileName.substr(index + 1);
            }
        });
        riskData.value = res.content
        total.value = res.totalElements
        console.log('riskData.value', riskData.value);
    });
}
getList();

/** 搜索按钮操作 */
function handleQuery() {
    query.value.searchKey = searchKey;
    getList();
}

/** 表单重置 */
function reset() {
    searchKey.value = '';
    query.value = { pageNum: 1, pageSize: 8, sortBy: 'id', order: 'DESC', searchKey: '', riskType: '' }
    getList();
}
</script>